<template>
  <div class="clientType">
    <global-card>
      <template #leftTitle>
        <el-button type="success" icon="el-icon-refresh" @click="refresh">刷新</el-button>
      </template>
      <template #content>
        <el-table
          v-loading="loading"
          :data="tableData"
          border
          style="width: 100%"
          class="elTable"
        >
          <el-table-column type="index" label="序号" width="80" align="center"/>
          <el-table-column prop="ruleName" label="会员等级" align="center"/>
          <el-table-column prop="createByName" label="创建人" align="center"/>
          <el-table-column label="创建时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.createTime}}
            </template>
          </el-table-column>
          <el-table-column prop="updateByName" label="更新人" align="center"/>
          <el-table-column label="更新时间" align="center" prop="createTime" width="170">
            <template slot-scope="scope">
              {{ scope.row.updateTime }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200" align="center">
            <template #default="{ row }">
              <perButton label="达标条件" type="primary" size="mini" perms="PROTOCOL_EDIT"
                         @click="handlerTouch(row)"></perButton>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </global-card>

    <yc-dialog
      ref="ycDialog"
      :dialogTitle="dialogTitle"
      :centerTitle="dialogCenterTitle"
    >
      <template #content>
        <div class="dialog-content">
          <el-form
            :model="newModel"
            :rules="rules"
            ref="modelRef"
            label-width="110px"
          >
            <el-form-item label="单次充值金额" prop="singleRechargeAmount">
              <el-input v-model="newModel.singleRechargeAmount"/>
            </el-form-item>
            <el-form-item label="累计充值金额" prop="grandTotalRechargeAmount">
              <el-input v-model="newModel.grandTotalRechargeAmount"/>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <el-button type="primary" :loading="addOrUpdateLoading" @click="dialogSave">确定</el-button>
        <el-button @click="$refs.ycDialog.dialogVisible = false">取消
        </el-button>
      </template>
    </yc-dialog>

    <global-message
      v-if="isGlobalMessageShow"
      @receive="receive"
      :message="message"
    />
  </div>
</template>

<script>
  import ycDialog from "@/components/pageDialog"
  import perButton from "@/components/permissionButton"
  import {
    queryListVip,
    queryOneVipRule,
    setRuleItem
  } from "@/api/basicSetupManagement/vipDiscountRule"

  export default {
    components: {
      ycDialog,
      perButton
    },
    data() {
      return {
        tableData: [],
        searchForm: {
          agreementName: "",
          agreementType: ""
        },

        detailsDisabled: false,
        isGlobalMessageShow: false,

        dialogCenterTitle: "",
        dialogTitle: "",
        message: "",

        loading: false,
        newModel: {
          ruleCode: "",
          singleRechargeAmount: "",
          grandTotalRechargeAmount: ""
        },
        rules: {
          singleRechargeAmount: [
            { required: true, message: "请输入单次充值金额", trigger: "blur" }
          ],
          grandTotalRechargeAmount: [
            { required: true, message: "请输入累计充值金额", trigger: "blur" }
          ]
        },
        addOrUpdateLoading: false
      }
    },
    created() {
      this.getData()
    },
    methods: {
      async searchClick() {
        this.getData()
      },
      async getData() {
        const { agreementName, agreementType } = this.searchForm
        this.loading = true
        const data = await queryListVip()
        this.tableData = data.object
        this.loading = false
      },
      pagination(pageItem) {
        this.getData(pageItem.page, pageItem.limit)
      },

      // 达标条件
      handlerTouch(row) {
        Object.keys(this.newModel).forEach((item) => {
          this.newModel[item] = ""
        })
        this.dialogCenterTitle = "达标条件"
        this.dialogTitle = "达标条件"

        this.tableDataItem = row
        this.queryOneVipRule()
        this.newModel.ruleCode = row.ruleCode

        this.detailsDisabled = false
        this.addOrUpdateLoading = false
        this.$refs.ycDialog.dialogVisible = true
        if (this.$refs["modelRef"]) {
          this.$refs["modelRef"].resetFields()
          this.$refs["modelRef"].clearValidate()
        }
      },

      async queryOneVipRule() {
        const { object } = await queryOneVipRule({
          id: this.tableDataItem.id
        })
        if (object) {
          this.newModel.singleRechargeAmount = object.singleRechargeAmount
          this.newModel.grandTotalRechargeAmount = object.grandTotalRechargeAmount
        }
      },

      async dialogSave() {
        this.$refs.modelRef.validate(async (v) => {
          if (v) {
            this.addOrUpdateLoading = true
            const { status, message } = await setRuleItem({ ...this.newModel })
            if (status == "200") {
              this.$message({
                message: message,
                type: "success"
              })
              this.getData()
              this.$refs.ycDialog.dialogVisible = false
            }

            this.addOrUpdateLoading = false
          }
        })
      },

      receive() {
        this.isGlobalMessageShow = false
      },

      refresh() {
        this.searchForm = {
          agreementName: "",
          agreementType: ""
        }
        this.getData()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .clientType {
    .title-container {
      display: flex;
      justify-content: flex-end;
      margin-right: 20px;

      .left-box {
        display: flex;

        .formClass {
          /*display: flex;*/
          /*margin-right: 20px;*/

          .el-form-item {
            margin-top: 20px;
            margin-bottom: 0;

            .el-input {
              width: 216px;
            }

            .el-select {
              width: 171px;
              margin-left: 10px;
            }

            .el-date-editor {
              width: 336px;
              margin-left: 10px;
            }
          }
        }

        /*.el-button {*/
        /*  // width: 42px;*/
        /*  height: 36px;*/
        /*  margin-top: 20px;*/
        /*}*/
      }
    }
  }
</style>
